<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="vue3.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
  {{ val }}
</div>
<div id="app">

</div>

<template id="app2">
  <div>
    {{val}}
    <button @click="fn1">父组件按钮1</button>
    <counter aa='22' @bb="sun_fun"></counter>
    <input type="text" v-model="val">
  </div>
  <div> 
    对象监听:
    <p><input type="text" v-model="objName"></p>
    <p><input type="text" v-model="objLen"></p>
  </div>
  <div> 
    watchEffect监听: 
    <p><input type="text" v-model="newWatchName"></p>
    <p><input type="text" v-model="newWatchLen"></p>
  </div>
</template>


<script>
 const { provide ,ref, watch , reactive , toRefs , watchEffect } =Vue
  //组件
  const Counter={
    template:`<div>子组件<button @click="s_btn">子组件按钮1</button></div>`,
    setup(props,context){
      let {attrs,emit} =context
      let s_btn=()=>{
        emit('bb')
      }
      return {
        s_btn
      }
    },
  }
  //父组件
const HelloVueApp = {
  template:"#app2",
  components:{Counter},

  setup(){
    let val=ref(1)
    let fn1=()=>{
      val++
      console.log(val)
    }
   //方式一
    watch(val,(newVal,oldVal)=>{
      console.log("新值",newVal)
      console.log("旧值",oldVal)
    })
    //方式二
    let obj= reactive({objName:'jj',objLen:2})
    watch([()=>obj.objName,()=>obj.objLen],([newObjName,oldObjName],[newobjLen,oldObjLen])=>{
      console.log(newObjName,oldObjName,newobjLen,oldObjLen)
    })
    const { objName , objLen }=toRefs(obj) 
    //方式三
    let newWatchStyle= reactive({newWatchName:'',newWatchLen:0})
    watchEffect(()=>{
      console.log("newWatchName",newWatchStyle.newWatchName)
      console.log("newWatchLen",newWatchStyle.newWatchLen)
    })
    const { newWatchName , newWatchLen }=toRefs(newWatchStyle) 
     //子组件的方法
     let sun_fun=()=>{
      alert("我是子组件给的数据")
    }
    return {
      sun_fun,
      val,
      fn1,
      objName,
      objLen,
      newWatchName,
      newWatchLen,
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>